<template>
  <div>
    <!--  根据条件查询-->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择一级种类名称:">
          <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
            <el-option value='' label="请选择"></el-option>
            <el-option @click.native="getPid(item.pid)"
                       v-for="item in fileKind"
                       :key="item.id"
                       :label="item.kindName"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
          <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind2"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
          <el-select v-model="value3" placeholder="选择三级种类">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind3"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input v-model="name" placeholder="产品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="init">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--编号,名称,档次级别,1级分类,二级分类,三级分类,用途类型,产品经理  -->
    <div>
      <el-table
          :data="fileData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="productId"
            label="产品编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="产品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="productClass"
            label="档次级别"
            width="120">
        </el-table-column>
        <el-table-column
            prop="firstKindName"
            label="一级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="secondKindName"
            label="二级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="thirdKindName"
            label="三级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="type"
            label="用途类型"
            width="120">
          <template slot-scope="scope">
            <p v-if="fileData[scope.$index].type=='Y001-1'">商品</p>
            <p v-else-if="fileData[scope.$index].type=='Y001-2'">物料</p>
            <p v-else>无法识别</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="responsiblePerson"
            label="产品经理"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页    -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

    <!-- 查询详情 -->
    <el-dialog title="产品信息详情:" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick2">
          <!--       主信息 -->
          <el-tab-pane label="主信息" name="first">
            <div>
              <p class="text-center"><label style="position: relative;left: 200px;">档案编号:<b
                  v-text="fileDataDetail.productId"></b></label></p>
              <p class="text-center">
                <label style="position: relative;left: 200px;">产品名称:
                  <b v-text="fileDataDetail.productName"></b>
                </label>
                <label style="position: relative;left: 500px;">
                  制造商:
                  <b v-text="fileDataDetail.factoryName"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">一级分类:
                  <b v-text="fileDataDetail.firstKindName"></b>
                </label>
                <label style="position: relative;left: 530px;">
                  二级分类:
                  <b v-text="fileDataDetail.secondKindName"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">三级分类:
                  <b v-text="fileDataDetail.thirdKindName"></b>
                </label>
                <label style="position: relative;left: 515px;">
                  产品简称:
                  <b v-text="fileDataDetail.productNick"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">用途类型:
                  <b v-text="fileDataDetail.type"></b>
                </label>
                <label style="position: relative;left: 505px;">
                  档次级别:
                  <b v-text="fileDataDetail.productClass"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">计量单位:
                  <b v-text="fileDataDetail.personalUnit"></b>
                </label>
                <label style="position: relative;left: 540px;">
                  计量值:
                  <b v-text="fileDataDetail.personalValue"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">市场单价:
                  <b v-text="fileDataDetail.listPrice"></b>
                </label>
                <label style="position: relative;left: 505px;">
                  计划成本单价:
                  <b v-text="fileDataDetail.costPrice"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">成本单价:
                  <b v-text="fileDataDetail.realCostPrice"></b>
                </label>
              </p>
            </div>
          </el-tab-pane>
          <!--        辅助信息-->
          <el-tab-pane label="辅助信息" name="second">
            <div>
              <p class="text-center">
                <label style="position: relative;left: 200px;">保修期:
                  <b v-text="fileDataDetail.warranty"></b>
                </label>
                <label style="position: relative;left: 500px;">替代品名称:
                  <b v-text="fileDataDetail.twinName"></b>
                </label>
              </p>
              <p class="text-center">
                <label style="position: relative;left: 200px;">替代品编号:
                  <b v-text="fileDataDetail.twinId"></b>
                </label>
                <label style="position: relative;left: 500px;">
                  生命周期(年):
                  <b v-text="fileDataDetail.lifecycle"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">单位:
                  <b v-text="fileDataDetail.amountUnit"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">供应商集合:
                  <b v-text="fileDataDetail.providerGroup"></b>
                </label>
                <label style="position: relative;left: 470px;">
                  产品描述:
                  <b v-text="fileDataDetail.productDescribe"></b>
                </label>
              </p>

              <!--              <p class="text-center">
                              <label style="position: relative;left: 200px;" >档案附件:
                                <b v-text="fileDataDetail.type"></b>
                              </label>
                              <label style="position: relative;left: 505px;">
                                档案变更累计:
                                <b v-text="fileDataDetail.productClass"></b>
                              </label>
                            </p>-->

              <p class="text-center">
                <label style="position: relative;left: 200px;">最近变更时间:
                  <b v-text="fileDataDetail.updateTime"></b>
                </label>
                <label style="position: relative;left: 340px;">
                  建档时间:
                  <b v-text="fileDataDetail.createTime"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">产品经理:
                  <b v-text="fileDataDetail.responsiblePerson"></b>
                </label>
                <label style="position: relative;left: 485px;">
                  登记人:
                  <b v-text="fileDataDetail.register"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">复核人:
                  <b v-text="fileDataDetail.checker"></b>
                </label>
                <label style="position: relative;left: 500px;">复核时间:
                  <b v-text="fileDataDetail.checkTime"></b>
                </label>
              </p>
            </div>
          </el-tab-pane>
          <!--        全部信息-->
          <el-tab-pane label="全部信息" name="third">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>主信息:</el-breadcrumb-item>
              <hr/>

            </el-breadcrumb>
            <div>
              <p class="text-center"><label style="position: relative;left: 200px;">档案编号:<b
                  v-text="fileDataDetail.productId"></b></label></p>
              <p class="text-center">
                <label style="position: relative;left: 200px;">产品名称:
                  <b v-text="fileDataDetail.productName"></b>
                </label>
                <label style="position: relative;left: 500px;">
                  制造商:
                  <b v-text="fileDataDetail.factoryName"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">一级分类:
                  <b v-text="fileDataDetail.firstKindName"></b>
                </label>
                <label style="position: relative;left: 530px;">
                  二级分类:
                  <b v-text="fileDataDetail.secondKindName"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">三级分类:
                  <b v-text="fileDataDetail.thirdKindName"></b>
                </label>
                <label style="position: relative;left: 515px;">
                  产品简称:
                  <b v-text="fileDataDetail.productNick"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">用途类型:
                  <b v-text="fileDataDetail.type"></b>
                </label>
                <label style="position: relative;left: 505px;">
                  档次级别:
                  <b v-text="fileDataDetail.productClass"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">计量单位:
                  <b v-text="fileDataDetail.personalUnit"></b>
                </label>
                <label style="position: relative;left: 540px;">
                  计量值:
                  <b v-text="fileDataDetail.personalValue"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">市场单价:
                  <b v-text="fileDataDetail.listPrice"></b>
                </label>
                <label style="position: relative;left: 505px;">
                  计划成本单价:
                  <b v-text="fileDataDetail.costPrice"></b>
                </label>
              </p>

              <p class="text-center">
                <label style="position: relative;left: 200px;">成本单价:
                  <b v-text="fileDataDetail.realCostPrice"></b>
                </label>
              </p>
            </div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>辅助信息:</el-breadcrumb-item>
              <hr/>
              <div>
                <p class="text-center">
                  <label style="position: relative;left: 200px;">保修期:
                    <b v-text="fileDataDetail.warranty"></b>
                  </label>
                  <label style="position: relative;left: 500px;">替代品名称:
                    <b v-text="fileDataDetail.twinName"></b>
                  </label>
                </p>
                <p class="text-center">
                  <label style="position: relative;left: 200px;">替代品编号:
                    <b v-text="fileDataDetail.twinId"></b>
                  </label>
                  <label style="position: relative;left: 500px;">
                    生命周期(年):
                    <b v-text="fileDataDetail.lifecycle"></b>
                  </label>
                </p>

                <p class="text-center">
                  <label style="position: relative;left: 200px;">单位:
                    <b v-text="fileDataDetail.amountUnit"></b>
                  </label>
                </p>

                <p class="text-center">
                  <label style="position: relative;left: 200px;">供应商集合:
                    <b v-text="fileDataDetail.providerGroup"></b>
                  </label>
                  <label style="position: relative;left: 470px;">
                    产品描述:
                    <b v-text="fileDataDetail.productDescribe"></b>
                  </label>
                </p>

                <!--              <p class="text-center">
                                <label style="position: relative;left: 200px;" >档案附件:
                                  <b v-text="fileDataDetail.type"></b>
                                </label>
                                <label style="position: relative;left: 505px;">
                                  档案变更累计:
                                  <b v-text="fileDataDetail.productClass"></b>
                                </label>
                              </p>-->

                <p class="text-center">
                  <label style="position: relative;left: 200px;">最近变更时间:
                    <b v-text="fileDataDetail.updateTime"></b>
                  </label>
                  <label style="position: relative;left: 340px;">
                    建档时间:
                    <b v-text="fileDataDetail.createTime"></b>
                  </label>
                </p>

                <p class="text-center">
                  <label style="position: relative;left: 200px;">产品经理:
                    <b v-text="fileDataDetail.responsiblePerson"></b>
                  </label>
                  <label style="position: relative;left: 485px;">
                    登记人:
                    <b v-text="fileDataDetail.register"></b>
                  </label>
                </p>

                <p class="text-center">
                  <label style="position: relative;left: 200px;">复核人:
                    <b v-text="fileDataDetail.checker"></b>
                  </label>
                  <label style="position: relative;left: 500px;">复核时间:
                    <b v-text="fileDataDetail.checkTime"></b>
                  </label>
                </p>
              </div>
            </el-breadcrumb>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import request from "../../request.js"

export default {
  name: "fileQuery",
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      formInline: {
        user: '',
        region: ''
      },
      pid: '',
      value: '',
      value2: '',
      value3: '',
      fileKind: [],
      fileKind2: [],
      fileKind3: [],
      //查询数据
      pageNum: '',
      pageSize: '',
      name: '',
      total: '',
      //初始化展示数据
      fileData: [],
      fileDataDetail: {}
    }
  }, methods: {
    handleClick(row) {

      console.log(row);
      this.fileDataDetail.productId = row.productId
      this.fileDataDetail.productName = row.productName
      this.fileDataDetail.factoryName = row.factoryName
      this.fileDataDetail.firstKindId = row.firstKindId
      this.fileDataDetail.firstKindName = row.firstKindName
      this.fileDataDetail.secondKindId = row.secondKindId
      this.fileDataDetail.secondKindName = row.secondKindName
      this.fileDataDetail.thirdKindId = row.thirdKindId
      this.fileDataDetail.thirdKindName = row.thirdKindName
      this.fileDataDetail.productNick = row.productNick
      this.fileDataDetail.type = row.type
      this.fileDataDetail.productClass = row.productClass
      this.fileDataDetail.personalUnit = row.personalUnit
      this.fileDataDetail.personalValue = row.personalValue
      this.fileDataDetail.providerGroup = row.providerGroup
      this.fileDataDetail.warranty = row.warranty
      this.fileDataDetail.twinName = row.twinName
      this.fileDataDetail.twinId = row.twinId
      this.fileDataDetail.lifecycle = row.lifecycle
      this.fileDataDetail.listPrice = row.listPrice
      this.fileDataDetail.costPrice = row.costPrice
      this.fileDataDetail.realCostPrice = row.realCostPrice
      this.fileDataDetail.amountUnit = row.amountUnit
      this.fileDataDetail.productDescribe = row.productDescribe
      this.fileDataDetail.responsiblePerson = row.responsiblePerson
      this.fileDataDetail.register = row.register
      this.fileDataDetail.registerTime = row.registerTime
      this.fileDataDetail.checker = row.checker
      this.fileDataDetail.checkTime = row.checkTime
      this.fileDataDetail.checkTag = row.checkTag
      this.fileDataDetail.changer = row.changer
      this.fileDataDetail.changeTime = row.changeTime
      this.fileDataDetail.changeTag = row.changeTag
      this.fileDataDetail.priceChangeTag = row.priceChangeTag
      this.fileDataDetail.fileChangeAmount = row.fileChangeAmount
      this.fileDataDetail.deleteTag = row.deleteTag
      this.fileDataDetail.designModuleTag = row.designModuleTag
      this.fileDataDetail.designProcedureTag = row.designProcedureTag
      this.fileDataDetail.designCellTag = row.designCellTag
      this.fileDataDetail.createTime = row.createTime
      this.fileDataDetail.updateTime = row.updateTime
      this.fileDataDetail.deleted = row.deleted
      this.dialogVisible = true;
    },
    //初始化数据
    init() {
      axios.get("http://localhost:8150/file/queryProduct", {
        params: {
          'name': this.name,
          'firstId': this.value,
          'secondId': this.value2,
          'threeId': this.value3,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize
        }
      }).then(data => {
        if (data.data.flag==false){
          this.$message({
            showClose:true,
            message:data.data.message,
            type:data.data.flag==true?"success":"error"
          })
          return;
        }
        this.fileData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.init();
    },
    changeLevel2(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    }, changeLevel3(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    }, getPid(id) {
      this.pid = id;
    },//获取下拉框的值
    getSelectValue() {
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    }, handleClose() {
      this.fileDataDetail = {};
      this.dialogVisible = false;
    },
    handleClick2(tab, event) {
      //  console.log(tab, event);
    }
  }, created() {
    this.getSelectValue();
    this.init();
  }
}
</script>

<style scoped>

</style>